<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="../include/tag.jsp"%>
<!DOCTYPE html>
<html lang="zh">
<head>
<title>表单信息详情</title>
<%@include file="../include/commonFile.jsp"%>
<style type="text/css">
body {
	min-width: auto !important;
	background-color: white !important;
}

.info-container {
	padding-top: 10px;
	margin: 0px auto;
	width: 90%;
}

.user-infos {
	display: block;
	width: 100%;
}

.avater-big {
	width: 140px;
	height: 90px;
	display: inline-block;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
	border: #fff 2px solid;
	border-radius: 4px;
}

.layui-table[lay-skin=line] td, .layui-table[lay-skin=line] th {
	border: none;
	border-bottom: 1px dashed #E2E2E1;
}
.aui-row {
	overflow: hidden;
	margin: 0;
}
[class*=aui-col-xs-] {
	padding: 2.5px;
}
.aui-col-xs-4, .aui-col-xs-6 {
	position: relative;
	float: left;
}
.aui-col-xs-12 {
	width: 100%;
	position: relative;
}
.aui-col-xs-6 {
	width: 50%;
}
.aui-col-xs-4 {
	width: 33.33333333%;
}
.list-img-1 {
	height: 180px;
}
.list-img-4 {
	height: 130px;
}
.list-img-3 {
	height: 90px;
}
.list-img {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
}
* {
	-webkit-box-sizing: border-box;
			box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
	outline: none;
}
</style>
</head>
<body>
	<div class="layui-form info-container">
		<table class="layui-table" lay-skin="line">
			<c:set var="thatType" value=""></c:set>
			<c:forEach var="field" items="${fields}">
				<c:set var="thatType" value="${field.type}"></c:set>
				<tr>
					<td width="25%"><div style="word-break: break-all;">${field.title}</div></td>
					<c:set var="thatValue" value=""></c:set>
					<c:forEach var="info" items="${infos}">
						<c:if test="${field.id == info.fieldId}">
							<c:set var="thatValue" value="${info.fieldValue}"></c:set>
						</c:if>
					</c:forEach>
					<c:if test="${thatType == 'image'}">
						<td>
							<c:if test="${not empty thatValue}">
								<c:set var="urls" value="${fn:split(thatValue, ',')}"></c:set>
								<c:choose>
									<c:when test="${fn:length(urls) == 1}">
										<div class="aui-row aui-row-padded">
											<div class="aui-col-xs-12">
												<div style="<c:if test="${urls[0] != null}">background-image: url(${urls[0]}?imageMogr2/auto-orient/crop/450x250)</c:if>" class="list-img list-img-1"></div>
												<div class="tc"><a href="${urls[0]}" target="_blank">下载</a></div>
											</div>
										</div>
									</c:when>
									<c:when test="${fn:length(urls) == 2 || fn:length(urls) == 4}">
										<div class="aui-row aui-row-padded">
											<c:forEach var="imgUrl" items="${urls}">
												<div class="aui-col-xs-6">
													<div style="<c:if test="${imgUrl != null}">background-image: url(${imgUrl}?imageMogr2/auto-orient/crop/250x180)</c:if>" class="list-img list-img-4"></div>
													<div class="tc"><a href="${imgUrl}" target="_blank">下载</a></div>
												</div>
											</c:forEach>
										</div>
									</c:when>
									<c:otherwise>
										<c:forEach var="imgUrl" items="${urls}">
											<div class="aui-col-xs-4">
												<div style="<c:if test="${imgUrl != null}">background-image: url('${imgUrl}?imageMogr2/auto-orient/crop/180x180')</c:if>" class="list-img list-img-3"></div>
												<div class="tc"><a href="${imgUrl}" target="_blank">下载</a></div>
											</div>
										</c:forEach>
									</c:otherwise>
								</c:choose>
							</c:if>
						</td>
					</c:if>
					<c:if test="${thatType != 'image'}">
						<td><div style="word-break: break-all;">${thatValue}</div></td>
					</c:if>
				</tr>
			</c:forEach>
		</table>
	</div>
</body>
<script type="text/javascript">
	function downloadNetWork(imgUrl) {
        location.href = "${ctx}/fileupload/downloadNetwork.do?imgUrl=" + imgUrl;
    }
</script>
</html>